<template>
  <div>
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
      :default-active="defAct"
      :collapse="menuSwitch"
      :collapse-transition="true"
      @select="getSel"
    >
      <el-menu-item :route="{ name: 'home' }" index="首页">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>

      <el-submenu index="用户管理">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>用户管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-power :route="{ name: 'admin' }" index="管理员"
            >管理员</el-menu-item
          >
          <el-menu-item :route="{ name: 'student' }" index="学员管理"
            >学员管理</el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="课程管理">
        <template slot="title">
          <i class="el-icon-platform-eleme"></i>
          <span>课程管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item :route="{ name: 'courseadd' }" index="课程添加"
            >课程添加</el-menu-item
          >
          <el-menu-item :route="{ name: 'courselist' }" index="课程列表"
            >课程列表</el-menu-item
          >
          <el-menu-item :route="{ name: 'video' }" index="视频管理"
            >视频管理</el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  data () {
    return {
      defAct: '首页',
      menuSwitch: true //菜单开关
    }
  },
  created () {
    this.$bus.$on('sendcatch', swi => {
      console.log(swi)
      this.menuSwitch = swi
    })
    this.$bus.$on('sendmenu', meindex => {
      this.defAct = meindex
    })
  },
  methods: {
    getSel (index, indexPath) {
      //菜单发生选择事件
      console.log(indexPath) //["用户管理","学员管理"]
      this.$store.commit('setList', indexPath)
    }
  }
}
</script>
<style lang="less" scoped></style>
